<template>
	<div class="login-container"></div>
</template>

<script>
	export export default {
		data() {
			return {
				key: value
			}
		},
		mounted() {
			let data = []
			for (let index = 0; index < 20; index++) {
				data.push({
					id: index,
					name: '测试-' + index
				})
			}
		},
		methods: {
			concurrent(chunkList) {
				let concurrent = 2; // 并发数
				let progress = 0; // 进度
				const concurrentExecution = (list, limit, asyncHandle) => {
					// 递归执行
					let recursion = (arr) => {
						// 执行方法 arr.shift() 取出并移除第一个数据
						return asyncHandle(arr.shift()).then(() => {
							// 数组还未迭代完，递归继续进行迭代
							if (arr.length !== 0) {
								return recursion(arr)
							} else {
								return 'finish'
							}
						})
					}
					// 创建新的并发数组
					let listCopy = [].concat(list)
					// 正在进行的所有并发异步操作
					let asyncList = []
					limit = limit > listCopy.length ? listCopy.length : limit
					while (limit--) {
						asyncList.push(recursion(listCopy))
					}

					// 所有并发异步操作都完成后，本次并发控制迭代完成
					return Promise.all(asyncList)
				}
				concurrentExecution(chunkList, concurrent, (item) => {
					return new Promise((resolve, reject) => {
						progress++;
						console.log(`${progress}/${chunkList.length}`)
						setTimeout(() => {
							resolve({
								item,
								progress
							})
						}, 3 * 1000);
					})
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.login-container{
		width: 100%;
		height: 100vh;
		background: #2d343c;
	}
</style>
